
<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Camera and Video Control with HTML5 Example</title>
<meta name="description"
	content="Access the desktop camera and video using HTML, JavaScript, and Canvas.  The camera may be controlled using HTML5 and getUserMedia." />
<link type="text/css" rel="stylesheet" media="all" href="/netspri/style.css" />


</head>
<body>


	<!-- accessibility header -->
	<ul class=a11y-menu>
		<li><a href= />Home</a></li>
		<li><a href=#main>Main Content</a></li>
	</ul>
	<!-- site header and nav menu -->
	<header id=top>
		<div class="center clear">
			<div class=header-title>
				<a href=# class=logo><span>SPRI</span> </a>
			</div>


			<div class=header-sda
				style='font-family:"jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif; top:20px;text-align:right;'>
				<a href=# style=display:block;text-decoration:none; rel=nofollow>
					<span class=header-sda-byline
					style="display:block;text-transform:uppercase;color:yellow;font-size:80%;font-weight:bold;line-height:1;">
						fo-spri </span> <span class=header-sda-headline
					style="display:block;color: #fff;font-weight: bold; font-size:80%;">
						Low-cost, Portable, Easy to use<br>Point of Care Testing
				</span> <span class=header-sda-secondary
					style="display:block;font-size: 80%;color: #91c661;line-height:1;">
						Make detection easier!</span>
				</a>
			</div>
		</div>

	</header>


	<!-- content wrapper -->
	<div class=main>
		<div class="center clear">
			<!-- main content column -->
			<!--CONTENT-->

			<p>Image of Detection Area &nbsp;&nbsp;&nbsp;<button id="snap" class="sexyButton">Snap Photo</button></p>
			
			<video id="video" width="640" height="480" autoplay></video>
			
			<!-- <canvas id="canvas" width="640" height="480"></canvas> -->

			<script>
				// Put event listeners into place
				window
						.addEventListener(
								"DOMContentLoaded",
								function() {
									// Grab elements, create settings, etc.
									/* var canvas = document.getElementById("canvas"), */ 
									/* context = canvas.getContext("2d"),  */
									video = document.getElementById("video"), 
									videoObj = {
										"video" : true
									},
									errBack = function(error) {
										console.log("Video capture error: ",
												error.code);
									};

									// Put video listeners into place
									if (navigator.getUserMedia) { // Standard
										navigator.getUserMedia(videoObj,
												function(stream) {
													video.src = stream;
													video.play();
												}, errBack);
									} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
										navigator
												.webkitGetUserMedia(
														videoObj,
														function(stream) {
															video.src = window.webkitURL
																	.createObjectURL(stream);
															video.play();
														}, errBack);
									} else if (navigator.mozGetUserMedia) { // WebKit-prefixed
										navigator
												.mozGetUserMedia(
														videoObj,
														function(stream) {
															video.src = window.URL
																	.createObjectURL(stream);
															video.play();
														}, errBack);
									}

									// Trigger photo take
									document.getElementById("snap")
											.addEventListener(
													"click",
													function() {
														/* context.drawImage(
																video, 0, 0,
																640, 480); */
																alert("click");
													});
								}, false);
			</script>

		</div>

	</div>

</body>
</html>
